{extend name="extra@api/main"}

{block name="style"}
<link rel="stylesheet" href="__PUBLIC__/static/plugs/jsonFormater/jsonFormater.css?ver={:date('ymd')}"/>
{/block}

{block name='body'}
<div class="ui container">
    <div class="ui floating message">
        <h1 class="ui header">{:sysconf('site_name')} - {$title} {:sysconf('app_version')}</h1>
        <a href="{:url('/wiki')}">
            <button class="ui green button" style="margin-top: 15px">返回文档首页</button>
        </a>
        <div class="ui segment">
            <div class="ui items">
                <div class="item">
                    <div class="image">
                        <img src="{$group.img|default='__PUBLIC__/static/api/img/api_default.jpg'}">
                    </div>
                    <div class="content">
                        <span class="header">{$group.name}</span>
                        <div class="description">
                            <p>{$group.description|default="<span style='color:#ccc'>太懒了,没写...</span>"}</p>
                        </div>
                        <div class="extra">
                            {$group.detail|default="<span style='color:#ccc'>太懒了,没写...</span>"}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui teal big message" id="msg">接口访问地址：{$http_type.$api_url.$hash}</div>
        <div class="ui grid">
            <div class="four wide column">
                <div class="ui vertical menu" style="width: 100%;overflow: auto;">
                    {volist name="apiList" id="vo"}
                        <a class="{if condition=" $hash == $vo['hash']"}active{/if} teal item"
                            href="{:url('/wiki/'.$gid.'/'.$vo["hash"])}">
                        {:mb_substr($vo['info'], 0, 11)}...
                        <div class="ui {if condition=" $hash== $vo['hash']"}teal{/if} label"> &gt;</div>
                        </a>
                    {/volist}
            </div>
        </div>
        <div class="twelve wide column">
            <div class="ui floating message" id="detail" style="overflow: auto;">
                <h2 class='ui header'>接口唯一标识：<a target="_blank" href="{$http_type.$api_url.$hash}">{$hash}</a>（{$detail['apiName']}）
                </h2><br/>
                <div class="ui raised segment">
                    <span class="ui red ribbon large label">接口说明</span>
                    {if condition="$detail['status'] eq 0 "}
                        <span class='ui red label large'><i class="usb icon"></i>禁用</span>
                    {else /}
                        {if condition="$detail['isTest'] eq 1 "}
                            <span class='ui teal label large'><i class="usb icon"></i>测试</span>
                        {else /}
                            <span class='ui green label large'><i class="usb icon"></i>启用</span>
                        {/if}
                    {/if}
                    <span class="ui teal label large"><i class="certificate icon"></i>{:sysconf('app_version')}</span>
                    <span class="ui blue large label"><i class="chrome icon"></i>
                    {switch name="detail['method']"}
                        {case value="1" break="1"}POST{/case}
                        {case value="2" break="1"}GET{/case}
                        {default /}不限
                    {/switch}
                    </span>
                    <div class="ui message">
                        <p>{$detail['info']}</p>
                    </div>
                </div>
                <div class="ui pointing large blue four item menu">
                    <a class="item active" data-tab="first">请求参数</a>
                    <a class="item" data-tab="second">请求模拟</a>
                    <a class="item" data-tab="third">返回参数</a>
                    <a class="item" data-tab="fourth">返回示例</a>
                </div>
                <!-- 请求参数 -->
                <div class="ui tab segment active" data-tab="first">
                    <h3>公共请求参数【请在Header头里面传递】</h3>
                    <table class="ui orange celled striped table">
                        <thead>
                        <tr>
                            <th>参数名字</th>
                            <th>类型</th>
                            <th width="80">是否必须</th>
                            <th width="10%">默认值</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>version</td>
                            <td>String</td>
                            <td><span class="ui green label">必填</span></td>
                            <td>{:sysconf('app_version')}</td>
                            <td>API版本号【请在Header头里面传递】</td>
                        </tr>
                        <tr>
                            <td>access-token</td>
                            <td>String</td>
                            <td>{$detail['accessToken']==1?'<span class="ui green label">必填</span>':'<span
                                    class="ui red label">勿填</span>'}
                            </td>
                            <td></td>
                            <td>APP认证秘钥【请在Header头里面传递】</td>
                        </tr>
                        <tr>
                            <td>user-token</td>
                            <td>String</td>
                            <td>{$detail['needLogin']==1?'<span class="ui green label">必填</span>':'<span
                                    class="ui red label">勿填</span>'}
                            </td>
                            <td></td>
                            <td>登录检测:用户userID【请在Header头里面传递】</td>
                        </tr>
                        </tbody>
                    </table>
                    <h3>请求参数</h3>
                    <table class="ui red celled striped table">
                        <thead>
                        <tr>
                            <th width="12%">参数名字</th>
                            <th>类型</th>
                            <th width="80">是否必须</th>
                            <th width="10%">默认值</th>
                            <th width="10%">其他</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="request" id="vo"}
                        <tr>
                            <td>{$vo['fieldName']}</td>
                            <td>{$dataType[$vo['dataType']]}</td>
                            <td>{$vo['isMust']==1?'<span class="ui green label">必填</span>':'<span class="ui teal label">可选</span>'}
                            </td>
                            <td>{$vo['default']}</td>
                            <td>{$vo['range']}</td>
                            <td>{$vo['info']}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <!-- 请求模拟 -->
                <div class="ui tab segment" data-tab="second">
                    <h3>公共请求模拟参数【请在Header头里面传递】</h3>
                    <table class="ui orange celled striped table pub">
                        <thead>
                        <tr>
                            <th>参数名字</th>
                            <th>类型</th>
                            <th width="80">是否必须</th>
                            <th width="10%">默认值</th>
                            <th>请求值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>version</td>
                            <td>String</td>
                            <td><span class="ui green label">必填</span></td>
                            <td>{:sysconf('app_version')}</td>
                            <td class="ui input focus" style="width:100%;">
                                <input name="version" value="{:sysconf('app_version')}" placeholder="API版本号"/>
                            </td>
                        </tr>
                        <tr>
                            <td>access-token</td>
                            <td>String</td>
                            <td>{$detail['accessToken']==1?'<span class="ui green label">必填</span>':'<span
                                    class="ui red label">勿填</span>'}
                            </td>
                            <td></td>
                            <td class="ui input {$detail['accessToken']==1?'focus':'error'}" style="width:100%;">
                                <input name="access-token" value="" placeholder="APP认证秘钥" {$detail['accessToken']==1?:'readonly'} />
                            </td>
                        </tr>
                        <tr>
                            <td>user-token</td>
                            <td>String</td>
                            <td>{$detail['needLogin']==1?'<span class="ui green label">必填</span>':'<span
                                    class="ui red label">勿填</span>'}
                            </td>
                            <td></td>
                            <td class="ui input {$detail['needLogin']==1?'focus':'error'}" style="width:100%;">
                                <input name="user-token" value="" placeholder="用户userID" {$detail['needLogin']==1?:'readonly'}/>
                            </td>
                        </tr>
                        </tbody>
                    </table>

                    <h3>请求模拟参数</h3>
                    <form onsubmit="return false" method="{$detail['method']==1?'post':'get'}" enctype="multipart/form-data" id="submit_data">
                        <table class="ui red celled striped table pri">
                            <thead>
                            <tr>
                                <th>参数名字</th>
                                <th>类型</th>
                                <th width="80">是否必须</th>
                                <th width="10%">默认值</th>
                                <th>请求值</th>
                            </tr>
                            </thead>
                            <tbody>
                                {volist name="request" id="vo"}
                                    <tr>
                                        <td>{$vo['fieldName']}</td>
                                        <td>{$dataType[$vo['dataType']]}</td>
                                        <td>{$vo['isMust']==1?'<span class="ui green label">必填</span>':'<span class="ui teal label">可选</span>'}
                                        </td>
                                        <td>
                                            {$vo['default']}
                                            {if condition="$dataType[$vo['dataType']] eq 'File'"}
                                                <img src="__PUBLIC__/static/plugs/uploader/theme/image.png" id="img_show" style="width: 50px;height: 34px;">
                                            {/if}
                                        </td>
                                        <td class="ui input focus" style="width:100%;">
                                            {if condition="$dataType[$vo['dataType']] eq 'File'"}
                                                <input type="file" name="file" id="file_upload">
                                                <input type="hidden" name="{$vo.fieldName}" id="file_url">
                                            {else /}
                                                <input type="text" name="{$vo.fieldName}" value="{$vo.default}" placeholder="{$vo.info}">
                                            {/if}
                                        </td>
                                    </tr>
                                {/volist}
                            </tbody>
                        </table>
                    </form>
                    <!-- http模拟 -->
                    <div class="ui labeled input" style="width: 80%;">
                        <div class="ui label">{$http_type}</div>
                        <input type="text" value="{$api_url.$hash}" readonly>
                        <input type="hidden" value="{$url}" id="api_url">
                        <select class="ui compact selection dropdown" name="request_type" style="padding-top: 8px;">
                            <option {$detail['method']==1?:'selected'} value="GET">GET</option>
                            <option {$detail['method']==2?:'selected'} value="POST">POST</option>
                        </select>
                        <div type="submit" id="submit" class="ui button">发送</div>
                    </div>
                    <!-- 模拟返回参数 -->
                    <div class="ui tab segment active">
                        <pre id="json_output" style='font-family: Arial;'></pre>
                    </div>
                </div>
                <!-- 返回参数 -->
                <div class="ui tab segment" data-tab="third">
                    <h3>公共返回参数</h3>
                    <table class="ui olive celled striped table">
                        <thead>
                        <tr>
                            <th>返回字段</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>code</td>
                            <td>Integer</td>
                            <td>返回码，详情请参阅<a href="{:url('/wiki/errorcode')}">错误码说明</a></td>
                        </tr>
                        <tr>
                            <td>msg</td>
                            <td>String</td>
                            <td>错误描述，当请求成功时可能为空</td>
                        </tr>
                        <tr>
                            <td>debug</td>
                            <td>String</td>
                            <td>调试字段，如果没有调试信息会没有此字段(生产环境下将关闭此字段)</td>
                        </tr>
                        </tbody>
                    </table>
                    <h3>返回参数</h3>
                    <table class="ui green celled striped table">
                        <thead>
                        <tr>
                            <th>返回字段</th>
                            <th>类型</th>
                            <th>说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="response" id="vo"}
                        <tr>
                            <td>{$vo['showName']}</td>
                            <td>{$dataType[$vo['dataType']]}</td>
                            <td>{$vo['info']}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
                <!-- 返回示例 -->
                <div class="ui tab segment" data-tab="fourth">
                    <pre id="json" style='font-family: Arial;'></pre>
                </div>
                <div class="ui blue message">
                    <strong>温馨提示：</strong> 此接口参数列表根据后台代码自动生成，如有疑问请咨询后端开发
                </div>
            </div>
        </div>
        <p>&copy; Powered By <a href="/" target="_blank">{:sysconf('site_copy')}</a>
        <p>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__PUBLIC__/static/plugs/jquery/jquery-3.2.1.min.js?ver={:date('ymd')}"></script>
<script type="text/javascript" src="__PUBLIC__/static/plugs/jquery/jquery.form.js?ver={:date('ymd')}"></script>
<script type="text/javascript" src="__PUBLIC__/static/plugs/jsonFormater/jsonFormater.js?ver={:date('ymd')}"></script>
<script type="text/javascript" src="__PUBLIC__/static/plugs/semantic/components/tab.min.js?ver={:date('ymd')}"></script>
<script>
    // tab标签切换
    $('.pointing.menu .item').tab();

    // 请求示例json显示
    $(document).ready(function () {
        var s = function () {
            var options = {
                dom: '#json',
                isCollapsible: true,
                quoteKeys: true,
                tabSize: 2,
                imgCollapsed: "__PUBLIC__/static/plugs/jsonFormater/Collapsed.gif",
                imgExpanded: "__PUBLIC__/static/plugs/jsonFormater/Expanded.gif"
            };
            window.jf = new JsonFormater(options);
            jf.doFormat('{$detail["returnStr"]}');
        }();
    });
    $('.ui .vertical').css('max-height', $('#detail').outerHeight(true));

    // 请求模拟
    $(function(){
        //得到文件上传文件的真实缓存地址
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file)
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file)
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file)
            }
            return url;
        }

        //修改file类型input提交表单的文件真实地址
        $("#file_upload").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            var file = $("#file_upload").val();
            var filename = file.replace(/.*(\/|\\)/, "");
            var fileType = ['jpg', 'bmp', 'gif', 'png', 'jpeg'];
            var fileExt = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
            if (objUrl) {
                if (($.inArray(fileExt[0], fileType)) !== -1) {
                    $("#img_show").attr("src", objUrl);
                } else {
                    $("#img_show").attr("src", '__PUBLIC__/static/plugs/uploader/theme/image.png');
                }
                $("#file_url").val(objUrl);
            }
        });

        //模拟发送测试 并显示返回json
        $("#submit").on("click",function(){
            // jquery.form代替ajax提交text+file类型
            var data = {
                url: $("#api_url").val(),
                type: $("select").val(),
                headers: $(".pub td input").serializeJson(),
                dataType: 'json',
                success: function (res) {
                    var options = {
                        dom: '#json_output',
                        isCollapsible: true,
                        quoteKeys: true,
                        tabSize: 2,
                        imgCollapsed: "__PUBLIC__/static/plugs/jsonFormater/Collapsed.gif",
                        imgExpanded: "__PUBLIC__/static/plugs/jsonFormater/Expanded.gif"
                    };
                    window.jf = new JsonFormater(options);
                    $("#json_output").html(jf.doFormat(res));
                },
                error: function (error) {
                    console.log(error)
                }
            };
            $("#submit_data").ajaxSubmit(data);
        });
    });

    //jquery 表单数据序列化转换为json对象
    (function ($) {
        $.fn.serializeJson = function () {
            var serializeObj = {};
            var array = this.serializeArray();
            var str = this.serialize();
            $(array).each(function () {
                if (serializeObj[this.name]) {
                    if ($.isArray(serializeObj[this.name])) {
                        serializeObj[this.name].push(this.value);
                    } else {
                        serializeObj[this.name] = [serializeObj[this.name], this.value];
                    }
                } else {
                    serializeObj[this.name] = this.value;
                }
            });
            return serializeObj;
        };
    })(jQuery);

</script>
{/block}